<template>
    <div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div 
        v-for="(product, index) in products" 
        :key="index" 
        class="bg-white dark:bg-zinc-800 rounded-lg shadow p-4"
      >
        <img 
          :src="product.image" 
          :alt="product.title" 
          class="w-full h-48 object-cover mb-4"
        />
        <h2 class="text-zinc-800 dark:text-zinc-200 text-lg font-semibold mb-2">{{ product.title }}</h2>
        <p class="text-zinc-600 dark:text-zinc-400 mb-2">{{ product.description }}</p>
        <div class="flex items-center mb-2">
          <span class="text-red-500 text-xl font-bold">{{ product.price }}</span>
          <span class="text-zinc-500 line-through ml-2">{{ product.originalPrice }}</span>
        </div>
        <div v-if="product.badges" class="flex space-x-2">
          <span 
            v-for="(badge, badgeIndex) in product.badges" 
            :key="badgeIndex" 
            :class="badge.class" 
            class="text-white text-xs font-semibold px-2 py-1 rounded"
          >{{ badge.label }}</span>
        </div>
        <span v-else class="bg-blue-500 text-white text-xs font-semibold px-2 py-1 rounded">UP会员</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        products: [
          {
        image: 'https://placehold.co/150x150',
        title: '大吸力车载吸尘器',
        description: '口袋金刚吹吸宝S1车载吸尘器',
        price: '¥399',
        originalPrice: '¥499',
        badges: [{ label: 'HOT', class: 'bg-orange-500' }]
        },
        {
        image: 'https://placehold.co/150x150',
        title: '车载香薰',
        description: '抑味除菌,温和无刺激',
        price: '¥25',
        originalPrice: '¥29',
        badges: [
            { label: '生活优选', class: 'bg-yellow-500' },
            { label: 'UP会员', class: 'bg-blue-500' },
            { label: '售后免邮', class: 'bg-zinc-300' },
            { label: '7天价保', class: 'bg-blue-300' }
        ]
        },
        {
        image: 'https://placehold.co/150x150',
        title: '智能手环',
        description: '心率监测，睡眠分析，多功能运动模式',
        price: '¥99',
        originalPrice: '¥129',
        badges: [
            { label: '新品上市', class: 'bg-green-500' },
            { label: '限时折扣', class: 'bg-red-500' },
            { label: 'UP会员专享', class: 'bg-purple-500' }
        ]
        },
        {
        image: 'https://placehold.co/150x150',
        title: '蓝牙耳机',
        description: '真无线设计，高清音质，长久续航',
        price: '¥199',
        originalPrice: '¥299',
        badges: [
            { label: 'HOT', class: 'bg-orange-500' },
            { label: '好评如潮', class: 'bg-pink-500' }
        ]
        },
        {
        image: 'https://placehold.co/150x150',
        title: '便携式榨汁机',
        description: '一键操作，快速榨汁，便携旅行设计',
        price: '¥39',
        originalPrice: '¥59',
        badges: [
            { label: '夏日特饮', class: 'bg-cyan-500' },
            { label: '买一赠一', class: 'bg-lime-500' }
        ]
        }
        ]
      };
    }
  };
</script>
  
<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css";
</style>